<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="500" height="500">
			
		</canvas>
	</body>
	<script type="text/javascript">

		function draw(){
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			context.beginPath();
	    	context.moveTo(0,0);
			context.lineTo(10,0);
			context.moveTo(0,0);
			context.lineTo(0,300);
			context.moveTo(10,0);
			context.lineTo(10,300);
			context.moveTo(0,300);
			context.lineTo(10,300);
			context.stroke();
			context.beginPath();
	    	context.moveTo(10,0);
			context.lineTo(300,0);
			context.moveTo(0,0);
			context.lineTo(0,10);
			context.moveTo(300,10);
			context.lineTo(10,10);
			context.moveTo(300,0);
			context.lineTo(300,10);
			context.stroke();
			context.beginPath();
	    	context.moveTo(10,300);
			context.lineTo(300,300);
			context.moveTo(0,310);
			context.lineTo(300,310);
			context.moveTo(300,310);
			context.lineTo(300,300);
			context.moveTo(0,300);
			context.lineTo(0,310);
			context.stroke();
			context.beginPath();
	    	context.moveTo(300,10);
			context.lineTo(300,300);
			context.moveTo(300,0);
			context.lineTo(310,0);
			context.moveTo(310,0);
			context.lineTo(310,310);
			context.moveTo(300,310);
			context.lineTo(310,310);
			context.stroke();
			
						
		}
		window.addEventListener("load",draw,true);
	</script>
</html>